import { View, Text, TouchableOpacity, TextInput, Image, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useState, useRef } from 'react';
import { router } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';

export default function LoginPage() {
  const insets = useSafeAreaInsets();
  const [phone, setPhone] = useState('');
  const [code, setCode] = useState('');
  const [countdown, setCountdown] = useState(0);
  const timerRef = useRef<NodeJS.Timeout>();

  // 处理发送验证码
  const handleSendCode = () => {
    if (!phone || phone.length !== 11) {
      // 这里可以添加提示
      return;
    }
    
    setCountdown(60);
    timerRef.current = setInterval(() => {
      setCountdown(prev => {
        if (prev <= 1) {
          clearInterval(timerRef.current);
          return 0;
        }
        return prev - 1;
      });
    }, 1000);
  };

  // 处理登录
  const handleLogin = () => {
    if (!phone || phone.length !== 11) {
      // 这里可以添加提示
      return;
    }
    if (!code || code.length !== 6) {
      // 这里可以添加提示
      return;
    }
    
    // TODO: 处理登录逻辑
    router.back();
  };

  return (
    <KeyboardAvoidingView 
      className="flex-1 bg-white"
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    >
      <ScrollView 
        className="flex-1"
        contentContainerStyle={{
          flexGrow: 1,
          paddingTop: insets.top,
          paddingBottom: insets.bottom + 20
        }}
      >
        {/* 顶部返回按钮 */}
        <TouchableOpacity
          className="p-4"
          onPress={() => router.back()}
        >
          <Ionicons name="chevron-back" size={28} color="#374151" />
        </TouchableOpacity>

        {/* Logo和标题 */}
        <View className="items-center mt-8">
          <Image
            source={require('../../assets/images/react-logo.png')}
            className="w-24 h-24 rounded-3xl"
          />
          <Text className="text-2xl font-bold text-gray-800 mt-4">欢迎登录</Text>
          <Text className="text-base text-gray-500 mt-2">登录体验更多精彩功能</Text>
        </View>

        {/* 登录表单 */}
        <View className="px-8 mt-12">
          {/* 手机号输入 */}
          <View className="mb-6">
            <Text className="text-sm text-gray-600 mb-2">手机号</Text>
            <View className="flex-row items-center border-b border-gray-200">
              <Text className="text-gray-600 mr-2">+86</Text>
              <TextInput
                className="flex-1 h-12 text-base text-gray-800"
                placeholder="请输入手机号"
                keyboardType="number-pad"
                maxLength={11}
                value={phone}
                onChangeText={setPhone}
              />
            </View>
          </View>

          {/* 验证码输入 */}
          <View className="mb-8">
            <Text className="text-sm text-gray-600 mb-2">验证码</Text>
            <View className="flex-row items-center border-b border-gray-200">
              <TextInput
                className="flex-1 h-12 text-base text-gray-800"
                placeholder="请输入验证码"
                keyboardType="number-pad"
                maxLength={6}
                value={code}
                onChangeText={setCode}
              />
              <TouchableOpacity
                className="ml-4"
                onPress={handleSendCode}
                disabled={countdown > 0}
              >
                <Text className={countdown > 0 ? "text-gray-400" : "text-primary-500"}>
                  {countdown > 0 ? `${countdown}s后重新发送` : '获取验证码'}
                </Text>
              </TouchableOpacity>
            </View>
          </View>

          {/* 登录按钮 */}
          <TouchableOpacity
            className="h-12 bg-primary-500 rounded-full items-center justify-center"
            activeOpacity={0.8}
            onPress={handleLogin}
          >
            <Text className="text-white text-base font-medium">登录</Text>
          </TouchableOpacity>

          {/* 其他登录方式 */}
          <View className="mt-8">
            <View className="flex-row items-center justify-center">
              <View className="h-[1px] flex-1 bg-gray-200" />
              <Text className="mx-4 text-gray-400">其他登录方式</Text>
              <View className="h-[1px] flex-1 bg-gray-200" />
            </View>
            <View className="flex-row justify-center mt-6 space-x-8">
              <TouchableOpacity className="items-center">
                <View className="w-12 h-12 rounded-full bg-green-50 items-center justify-center mb-2">
                  <Ionicons name="logo-wechat" size={24} color="#10B981" />
                </View>
                <Text className="text-sm text-gray-600">微信</Text>
              </TouchableOpacity>
              <TouchableOpacity className="items-center">
                <View className="w-12 h-12 rounded-full bg-blue-50 items-center justify-center mb-2">
                  <Ionicons name="logo-apple" size={24} color="#3B82F6" />
                </View>
                <Text className="text-sm text-gray-600">Apple</Text>
              </TouchableOpacity>
            </View>
          </View>

          {/* 用户协议 */}
          <View className="mt-8">
            <Text className="text-center text-xs text-gray-400">
              登录即代表您已同意
              <Text className="text-primary-500" onPress={() => console.log('打开用户协议')}>
                《用户协议》
              </Text>
              和
              <Text className="text-primary-500" onPress={() => console.log('打开隐私政策')}>
                《隐私政策》
              </Text>
            </Text>
          </View>
        </View>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}
